<template>
  <div class="box">
    <!-- tab切换 -->
    <div class="tab">
      <ul v-for="(item, index) in nav" :key="index">
        <li :class="{ active: flag == index }" @click="tab(item, index)">
          {{ item }}
        </li>
      </ul>
    </div>
    <!-- 内容模块 -->
    <div class="content">
      <div v-for="item in list" :key="item.id">
        <div class="cont" v-if="flag == 0 ? list : txt == item.column_name">
          <div class="img">
            <img :src="item.cover" alt="" />
          </div>
          <!--  -->
          <div class="title">
            <h3>{{ item.title }}</h3>
            <p style="font-size: 6px">{{ item.summary }}</p>
            <!-- 时间 -->
            <p class="time">
              {{ item.published_at | Timedate }}
              <span>{{ JSON.parse(item.user_info).name }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      nav: [
        "最新文章",
        "大公司",
        "消费",
        "娱乐",
        "前沿技术",
        "汽车交通",
        "区块链",
        "技能Get",
      ],
      flag: 0,
      txt: "",
      list: [],
    };
  },
  created() {
    this.$axios.get("news.json").then((res) => {
      console.log(res);
      this.list = res.data.items;
      this.list = res.data.items.sort((a, b) => {
        //请求数据时,进行时间降序，按照时间戳
        return (
          new Date(b.published_at).getTime() -
          new Date(a.published_at).getTime()
        );
      });
      // console.log(this.list);
    });
  },
  mounted() {},
  methods: {
    // 高亮显示 tab切换
    tab(item, index) {
      console.log(item);
      this.flag = index;
      this.txt = item;
    },
  },
  //过滤器
  filters: {
    Timedate: function (timeStamp) {
      //返回本地时间
      var dateTime = new Date(timeStamp);
      //返回自1970以来时间戳
      var old = dateTime.valueOf();
      var year = dateTime.getFullYear();
      var month = dateTime.getMonth() + 1;
      var day = dateTime.getDate();
      var hour = dateTime.getHours();
      var minute = dateTime.getMinutes();
      var second = dateTime.getSeconds();
      var now = new Date();
      var now_new = now.valueOf();
      var milliseconds = 0;
      var timeSpanStr;
      //通过时间差，换算成对应的几分钟，几小时等
      milliseconds = now_new - old;
      //小于60秒
      if (milliseconds <= 1000 * 60 * 1) {
        timeSpanStr = "刚刚";
      }
      //在60秒与60分钟中间
      else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60)) + "分钟前";
      } else if (
        1000 * 60 * 60 * 1 < milliseconds &&
        milliseconds <= 1000 * 60 * 60 * 24
      ) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + "小时前";
      } else if (
        1000 * 60 * 60 * 24 < milliseconds &&
        milliseconds <= 1000 * 60 * 60 * 24 * 5
      ) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + "天前";
      } else {
        timeSpanStr = `${year}-${month}-${day}`;
      }
      return timeSpanStr;
    },
  },
};
</script>
<style scoped lang='scss'>
.box {
  width: 1000px;
  margin: 30px auto;
  overflow: hidden;
  .tab {
    background: #eee;
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: space-around;
    line-height: 60px;
  }
  .active {
    background-color: pink;
    width: 80px;
    text-align: center;
  }
  .content {
    width: 100%;
    height: 650px;
    // 显示滑动条
    overflow-y: scroll;
    background-color: #e2e9e9;
  }
  .cont {
    width: 950px;
    height: 180px;
    margin-top: 10px;
    display: flex;
    border-bottom: 1px solid #ccc;
  }
  img {
    width: 250px;
    height: 170px;
  }
  .time {
    font-size: 10px;
    margin-top: 100px;
    margin-left: 20px;
  }
}
</style>
